<script setup>
import { defineProps, inject, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import AliPayment from "@/views/cashier/components/payment-type/alipay.vue";
import WechatPayment from "@/views/cashier/components/payment-type/wepay.vue";
import CreditCardPayment from "@/views/cashier/components/payment-type/credit-card.vue";
import CashPayment from "@/views/cashier/components/payment-type/cash-pay.vue";
import BalancePayment from "@/views/cashier/components/payment-type/balance-pay.vue";
import CryptoCionPayment from "@/views/cashier/components/payment-type/crypto-cion.vue";

const { t } = useI18n();
const props = defineProps({
  staffList: {
    type: Array,
    default: [],
  },
  modalTitle: {
    type: String,
    default: null,
  },
  modalWidth: {
    type: Number,
    default: 780,
  },
  paymentInfo: {
    type: Object,
    default: {
      uid: 0,
      cartIds: [],
      total_price: 0,
      order_sn: "",
    },
  },
});

const modalsState = inject("modalsState");
const setModalVisibility = inject("setModalVisibility");
const payType = ref(1);
const paymentMethods = [
  {label:"alipay",value:1},
  {label:"wepay",value:2},
  {label:"creditCard",value:3},
  {label:"cash",value:4},
  {label:"balancePayment",value:5},
  {label:"cryptocurrency",value:6},
];

watch(
  () => modalsState.showPayment,
  (showPayment) => {
    if (showPayment) {
      // get all payment types from backend
    }
  }
);

const fetchCreateOrder = () => {
  const fetchCashierCreate = () => {
    fetchData(
      () =>
        cashierCreate(props.paymentInfo.uid, {
          coupon: 0,
          cart_id: props.paymentInfo.cartIds,
          pay_type: "",
          remarks: "",
          staff_id: 0,
          change_price: 0,
          is_price: 0,
          userCode: "",
          coupon_id: 0,
          auth_code: "",
          tourist_uid: "",
          seckill_id: 0,
          new: 0,
        }),
      (data) => {
        modalsState.showPayment = true;
        console.log(data);
      }
    );
  };
};
</script>

<template>
  <div class="relative h-full">
    <a-drawer
      :width="modalWidth"
      :title="$t('modalTitle')"
      v-model:visible="modalsState.showPayment"
      :closable="false"
    >
      <div class="payment">
        <div class="flex justify-center items-center">
          <a-button-group shape="round" class="mt-5">
            <a-button
              :type="item.value === payType ? 'primary' : 'dashed'"
              v-for="(item, index) in paymentMethods"
              :key="index"
              @click="payType = item.value"
            >
              <span class="text-base">{{ t(item.label) }}</span>
            </a-button>
          </a-button-group>
        </div>
        <div class="w-4/5 m-auto">
          <ali-payment v-if="payType === 1" :payPrice="paymentInfo.total_price" />
          <wechat-payment v-if="payType === 2" :payPrice="paymentInfo.total_price" />
          <credit-card-payment v-if="payType === 3" :payPrice="paymentInfo.total_price" />
          <cash-payment v-if="payType === 4" :payPrice="paymentInfo.total_price" />
          <balance-payment v-if="payType === 5" :payPrice="paymentInfo.total_price" />
          <crypto-cion-payment v-if="payType === 6" :payPrice="paymentInfo.total_price" />
        </div>
      </div>
      <template #footer>
          <a-button
            type="outline"
            shape="round"
            @click="setModalVisibility('showPayment', false)"
          >
{{ $t("cancelPayment") }}
          </a-button>
        </template>
    </a-drawer>
  </div>
</template>

<style scoped lang="less">

</style>
